﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Page Header with Global Navigation Menu</title>
</head>
<body><h2>Page Header with Global Navigation Menu</h2>
<p>PageHeaderTextBlock control page header control that helps developers to add a page header with built-in global navigation menu. Menu should be defined in App.xaml.cs file. Page header will have a right arrow which can be customized for individual pages. Pages can subscribe to global navigation menu item invoke event to pass navigation parameter to &ldquo;Navigating To Page&rdquo; or to cancel the navigation based on the state of the page.</p>
<p><img style="vertical-align: middle; margin-top: 1px;" src="http://download-codeplex.sec.s-msft.com/Download?ProjectName=storeapplib&amp;DownloadId=547828" alt="Page header with global navigation menu" width="231" height="253" /></p>
<h3>Namespace</h3>
<p><code>StoreAppLib.Controls</code></p>
<h3>Using PageHeaderTextBlock</h3>
<p>To use the control in your project, add reference to the StoreAppLib project&nbsp; or install StoreAppLib from Visual Studio "Manage NuGet Packages" tool.</p>
<p>You can define global navigation menu in the constructor of the App class in App.xaml.cs file. First add StoreAppLib.Controls namespace reference to the file and then define menu by specifying a label and type of the Navigate To page. Use GlobalNavigationMenuItem to add menu items and MenuSeparator to add menu separator.</p>
<p>&nbsp;Following example adds a menu item.</p>
<p><code><span style="font-size: 9.5pt; color: #2b91af;">&nbsp;&nbsp; PageHeaderTextBlock</span><span style="font-size: 9.5pt;">.AddMenu(<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span style="font-size: 9.5pt; color: #2b91af;"><span style="font-size: 9.5pt; color: #0000ff;">new</span><span style="font-size: 9.5pt;"><span style="font-size: 9.5pt;"> </span></span><span style="font-size: 9.5pt; color: #2b91af;"><span style="font-size: 9.5pt; color: #2b91af;"><span style="font-size: 9.5pt; color: #2b91af;">GlobalNavigationMenuItem</span></span></span></span><span style="font-size: 9.5pt;"><span style="font-size: 9.5pt;">() <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; { <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Label = </span></span><span style="font-size: 9.5pt; color: #2b91af;"><span style="font-size: 9.5pt; color: #a31515;">"DatePicker"</span></span><span style="font-size: 9.5pt;"><span style="font-size: 9.5pt;">,</span><span style="font-size: 9.5pt; color: #2b91af;"> <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span style="font-size: 9.5pt;">Page = </span><span style="font-size: 9.5pt; color: #2b91af;"><span style="font-size: 9.5pt; color: #0000ff;"><span style="color: #0000ff;">typeof</span></span></span></span><span style="font-size: 9.5pt;"><span style="font-size: 9.5pt;">(</span><span style="font-size: 9.5pt; color: #2b91af;"><span style="color: #2b91af;">DatePickerPage</span></span><span style="font-size: 9.5pt;">)<br /><span style="font-size: 9.5pt;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; });</span></span></span></code></p>
<p>Following code customise the menu.</p>
<code><p><span style="font-size: 9.5pt; color: #2b91af;">PageHeaderTextBlock</span><span style="font-size: 9.5pt;">.MenuPointerOverBackground = </span><span style="font-size: 9.5pt; color: #0000ff;">new</span><span style="font-size: 9.5pt;"> </span><span style="font-size: 9.5pt; color: #2b91af;">SolidColorBrush</span><span style="font-size: 9.5pt;">(</span><span style="font-size: 9.5pt; color: #2b91af;">Color</span><span style="font-size: 9.5pt;"> .FromArgb(255,175,67,67)); <br /></span><span style="font-size: 9.5pt; color: #2b91af;">PageHeaderTextBlock</span><span style="font-size: 9.5pt;">.MenuPressedBackground = </span><span style="font-size: 9.5pt; color: #0000ff;">new</span><span style="font-size: 9.5pt;"> </span><span style="font-size: 9.5pt; color: #2b91af;">SolidColorBrush</span><span style="font-size: 9.5pt;">(</span><span style="font-size: 9.5pt; color: #2b91af;">Color</span><span style="font-size: 9.5pt;">.FromArgb(255, 169, 0, 0)); <br /><span style="font-size: 9.5pt; color: #2b91af;">PageHeaderTextBlock</span>.MenuSeparatorColor = <span style="font-size: 9.5pt; color: #0000ff;">new</span> <span style="font-size: 9.5pt; color: #2b91af;">SolidColorBrush</span>(<span style="font-size: 9.5pt; color: #2b91af;">Color</span>.FromArgb(255, 255, 65, 65)); <br /><span style="font-size: 9.5pt; color: #2b91af;">PageHeaderTextBlock</span>.MenuSeparatorThickness = 2; <br /><span style="font-size: 9.5pt; color: #2b91af;">PageHeaderTextBlock</span>.MenuBackground = <span style="font-size: 9.5pt; color: #0000ff;">new</span> <span style="font-size: 9.5pt; color: #2b91af;">SolidColorBrush</span>(<span style="font-size: 9.5pt; color: #2b91af;">Color</span>.FromArgb(255, 170, 56, 56)); <br /><span style="font-size: 9.5pt; color: #2b91af;">PageHeaderTextBlock</span>.MenuForeground = <span style="font-size: 9.5pt; color: #0000ff;">new</span> <span style="font-size: 9.5pt; color: #2b91af;">SolidColorBrush</span>(<span style="font-size: 9.5pt; color: #2b91af;">Colors</span>.White); <br /><span style="font-size: 9.5pt; color: #2b91af;">PageHeaderTextBlock</span>.MenuBorderColor = <span style="font-size: 9.5pt; color: #0000ff;">new</span> <span style="font-size: 9.5pt; color: #2b91af;">SolidColorBrush</span>(<span style="font-size: 9.5pt; color: #2b91af;">Color</span>.FromArgb(255, 255, 65, 65)); <br /><span style="font-size: 9.5pt; color: #2b91af;">PageHeaderTextBlock</span>.MenuBorderThickness = 2;</span></p></code>

<p>To add page heading to a page, add the following namespace reference to the page.</p>
<p><code><span style="color: blue; font-size: 9.5pt;" lang="EN">&lt;</span><span style="color: #a31515; font-size: 9.5pt;" lang="EN">Page</span><span style="color: black; font-size: 9.5pt;" lang="EN"> </span><span style="color: red; font-size: 9.5pt;" lang="EN">xmlns</span><span style="color: blue; font-size: 9.5pt;" lang="EN">:</span><span style="color: red; font-size: 9.5pt;" lang="EN">storeApp</span><span style="color: red; font-size: 9.5pt;">Control</span><span style="color: blue; font-size: 9.5pt;" lang="EN">="using:StoreAppLib.Controls"</span><span style="color: blue; font-size: 9.5pt;"> ...</span></code></p>
<p>Following code add page header.</p>
    <p>&lt;<code><span style="font-size: 9.5pt; color: #0000ff;"><span style="font-size: 9.5pt; color: #a31515;">storeAppControl</span>:<span style="font-size: 9.5pt; color: #a31515;">PageHeaderTextBlock</span><span style="font-size: 9.5pt; color: #ff0000;"> <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Text</span>="Page Header" <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="font-size: 9.5pt; color: #ff0000;">GlobalNavigationInvoked</span>="OnGlobalNavigationInvoked"<span style="font-size: 9.5pt;"> </span>/&gt;</span></code></p>

<p>Use Arrow and <strong>ArrowSize </strong>property when you want to use another character as arrow. Use <strong>Content </strong>property to apply a template as arrow.</p>
<p>If you change the default style for the Heading and the Arrow, use the <strong>RenderTransform </strong>and <strong>ArrowRenderTransform </strong>to vertically align them.</p>
<p>Use the GlobalNavigationInvoked event to pass navigation parameter or to cancel the global navigation from the page.</p>
<p>The event signature is given below.</p>
<code><p><span style="font-size: 9.5pt; color: #0000ff;">private</span><span style="font-size: 9.5pt;"> </span><span style="font-size: 9.5pt; color: #0000ff;">void</span><span style="font-size: 9.5pt;"> OnGlobalNavigationInvoked(</span><span style="font-size: 9.5pt; color: #2b91af;">GlobalNavigationMenuItem</span><span style="font-size: 9.5pt;"> source, </span><span style="font-size: 9.5pt; color: #2b91af;">GlobalNavigationEventArgs </span><span style="font-size: 9.5pt;">args)<br />{&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp; <span style="font-size: 9.5pt; color: #008000;">//// args.Cancel = [true if you want to cancel navigation]<br />&nbsp;&nbsp;&nbsp;&nbsp; //// args.NavigationParamenter = [parameter to be passed to navigating to page]<br />&nbsp;&nbsp;&nbsp;&nbsp; //// args.Frame = [the frame object. By default this page frame]<br /></span>}</span></p></code>

<p>The &ldquo;source&rdquo; parameter represents the menu item. If you don&rsquo;t want to navigate away from the page based on the current state of the page, set <strong>args.Cancel = true</strong>.</p>
<p>If you select the global navigation menu item for the current page, args.Cancel value will be true by default and navigation will not occur. If you want to reload the page you can set args.Cancel to false.</p>
<p>Attach the parameter you want pass to the &ldquo;Navigate To&rdquo; page to<strong> args.NavigationParameter</strong>. The parameter can be accessed in the Paramenter property of the NaviagationEventArgs object in OnNavigatTo method in the &ldquo;Navigate To&rdquo; page.</p>

    </body>
</html>
